<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="50px"
        :disabled="isViewMode"
      >
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="formData.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input
            v-model="formData.address"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" v-show="!isViewMode">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleCommit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    mode: String,
    rowData: Object,
  },
  data() {
    return {
      dialogVisible: this.visible,
      isViewMode: false,
      formData: {
        date: "",
        name: "",
        address: "",
      },
    };
  },
  computed: {
    dialogTitle() {
      const titles = {
        create: "新建数据",
        edit: "编辑数据",
        view: "查看详情",
      };
      return titles[this.mode] || "详情";
    },
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    mode(newVal) {
      this.isViewMode = newVal === "view";
      if (newVal === "create") {
        // 如果是新建模式，清空表单
        this.formData = {
          date: "",
          name: "",
          address: "",
        };
      }
    },
    rowData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.formData = { ...newVal };
        }
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleCancle() {
      this.$emit("update:visible", false);
    },
    handleCommit() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 22px;
}
</style>
